<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="/css/layui.css">
  <link rel="stylesheet" href="/css/header.css">
  <script src="/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">区域论坛系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>
          
          <li class="layui-nav-item layui-hide-xs layui-this"><a href="">文章管理</a></li>
          <li class="layui-nav-item layui-hide-xs"><a href="/admin/user">用户管理</a></li>
          
        </ul>
        <ul class="layui-nav layui-layout-right list">
            <li style="line-height: 60px;">欢迎您：<span id="username"></span><a href="/admin/logout" style="color: rgb(0,150,136);">退出</a></li>
            <script>
              document.getElementById('username').innerHTML = sessionStorage.admin
            </script>
          
        </ul>
      </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-this">
            <a href="javascript:;">
                发布文章
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="/admin/articleList">
                查看文章列表
            </a>
        </li>
        <li class="layui-nav-item ">
            <a href="/admin/type">
                设置文章分类
            </a>
        </li>
        
        
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <h1 style="padding-left: 50px;">发布文章</h1>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">文章标题</label>
              <div class="layui-input-block">
               <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">文章分类</label>
              <div class="layui-input-block">
                <select name="type_id" lay-verify="required">
                    <option value=""></option>
                    <% data.forEach(function(item,index){ %>
                        <option value="<%= item.id %>"><%= item.name %></option>
                    <% }); %>
                  </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">文章内容</label>
              <div class="layui-input-block">
                <textarea  id="article" style="display: none;"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              </div>
            </div>
          </form>
      
    </div>
  </div>
  

</div>

<script>
    layui.use( function(){
      var layedit = layui.layedit;


      var form = layui.form;
      var $ = layui.jquery;
   

      let index = layedit.build('article',{
          height:500,
          tool: [
            'strong' //加粗
            ,'italic' //斜体
            ,'underline' //下划线
            ,'del' //删除线
            ,'|' //分割线
            ,'left' //左对齐
            ,'center' //居中对齐
            ,'right' //右对齐
            ,'link' //超链接
            ,'unlink' //清除链接
          ]
      }); //建立编辑器


 // 监听提交
    form.on('submit(formDemo)', function(formdata){
        $.post({
          url:"/article/add",
          data:{
            ...formdata.field,
            user_id:0,
            content:layedit.getContent(index),
            create_time:new Date().getTime()
          },
          success:function(res){
              console.log(res);
              if(res.code == 0){
                layer.msg("提交成功")
                setTimeout(() => {
                  location.reload()
                }, 1000);
              }else{
                layer.msg("提交失败，请检查网络")
              }
            }
        })
        return false;
    });


    });
    </script>

</body>
</html>